<template>
	<view>
		<uni-nav-bar title="选择一个聊天" :statusBar="true" left-icon="back" :fixed="true" @clickLeft="$tab.back()"
			:border="false" backgroundColor="#f0f4fa">
		</uni-nav-bar>
		<view class="p-20" style="background-color: #f0f4fa;">
			<view class="px-32 py-16 bg-FFF flex items-center">
				<u-icon name="search" color="#9E9E9E" size="20px"></u-icon>
				<div class="text-9E9E9E text-32 ml-12">搜索</div>
			</view>

			<!-- 最近转发 -->
			<view class="mt-48" v-if="lastForwardList.length > 0">
				<view class="flex items-center justify-between">
					<view class="">
						最近转发
					</view>
					<view class="flex items-center">
						<view class="text-9E9E9E" v-if="isMultiple" @click="isMultiple = false">
							取消
						</view>
						<view class="ml-16">
							<view class="finish-btn" v-if="isMultiple" @click="confirm">
								完成
							</view>
							<view class="" v-else @click="isMultiple = true">
								多选
							</view>
						</view>
					</view>
				</view>

				<view class="last-forward-list mt-32">
					<view class="flex flex-col items-center" v-for="(item,index) in lastForwardList" :key="item.id">
						<image :src="item.groupAvatar" class="image-80 round-8" mode=""></image>
						<view class="text-9E9E9E mt-12">
							{{item.groupName}}
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="list-cell flex items-center" v-for="(cell, index) in indexList" :key="cell.groupId">
			<checkbox-group @change.stop="selectUser(cell)" v-if="isMultiple">
				<checkbox :checked="cell.checked" />
			</checkbox-group>
			<image :src="cell.groupAvatar" class="image-80 round-8 ml-20" mode=""
				@click="confirm(cell)"></image>
			<view class="text-32 ml-20 font-500" @click="confirm(cell)">
				{{cell.groupName}}
			</view>
		</view>

		<view class="" style="height: 200rpx;">

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				selectUserList: [],

				forwardId: null, //转发id 如果是转发则有
				lastForwardList: [],
				isMultiple: false
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.groupId = e.id
			}

			if (e && e.forwardId) {
				this.forwardId = e.forwardId
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			selectUser(item) {
				item.checked = !item.checked
				if (item.checked) {
					this.selectUserList.push(item.groupId)
				} else {
					let findIndex = this.selectUserList.findIndex(select => {
						return select == item.groupId
					})
					if (findIndex != -1) {
						this.selectUserList.splice(findIndex, 1)
					}
				}
			},
			async getData() {
				const res = await this.$Api.chat.chatList({
					pageNum: 1,
					pageSize: 1000
				})

				this.indexList = res.rows.map(item => {
					return {
						...item,
						checked: false
					}
				})

				const lastForward = await this.$Api.chat.lastForward({
					pageNum: 1,
					pageSize: 5
				})
				this.lastForwardList = lastForward.rows
			},
			keywordChange(e) {
				this.getData()
			},
			async confirm(item) {
				if (this.isMultiple && this.selectUserList.length == 0) {
					this.$modal.msg('请先选择联系人!')
					return
				}

				const res = await this.$Api.chat.msgForward({
					id: this.forwardId,
					groupIds: this.isMultiple ? this.selectUserList.join(',') : item.groupId
				})

				this.$modal.msg('转发成功!')
				this.$tab.back(1500)

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		.confirm {
			width: 276rpx;
			height: 88rpx;
			background: #000000;
			line-height: 88rpx;
			text-align: center;
		}
	}

	/deep/ .u-index-anchor {
		background-color: #FFF !important;
		border: none !important;
	}

	/deep/ .uni-checkbox-input-checked {
		background-color: #000000 !important;
	}

	.userBox {
		width: 360rpx;
		height: 80rpx;

	}

	.lastBox {
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, .5);
		top: 0;
		z-index: 999;
		line-height: 80rpx;
	}

	.last-forward-list {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));

	}

	.finish-btn {
		background-color: #3998FB;
		padding: 4rpx 12rpx;
		border-radius: 4rpx;
		color: #FFF;
	}
</style>